import { useMemo, useRef } from 'react'
import { DataZoomSliderComponent } from 'echarts/components'

function useDataZoom(chart) {
  const { dataZoomEnabled } = chart
  const isFirst = useRef(true)
  const dataZoom = useMemo(() => {
    const show = dataZoomEnabled
    if (!dataZoomEnabled) {
      if (isFirst.current) {
        isFirst.current = false
        return {}
      }
      return {
        dataZoom: { show }
      }
    }

    return {
      dataZoom: {
        type: 'slider',
        show,
        height: 16,
        bottom: 6,
        right: 4
      }
    }
  }, [chart])

  return {
    dataZoom,
    dataZoomComponent: dataZoomEnabled ? [DataZoomSliderComponent] : []
  }
}

export default useDataZoom
